import React from "react";
import {connect} from 'dva';
import {Button, Card, Form, message, Modal, Spin, Table, Tooltip} from "antd";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import FilterForm from "@/components/BaseForm/FilterForm";
import witty from "@/utils/wittyUtils";

let pagingData = {
    _pageSize: 10,
    _current: 1,
    _total: 0,
};

@connect(({accountModel}) => ({
    accountModel,
}))
class AdminAccount extends React.Component {
    state = {
        //-- 页面数据
        dataSource: [],
        //-- 加载层
        loading: false,
        //-- [true]: 显示搜索条件, [false]: 隐藏搜索条件
        showMoreSearchForm: false,
        //-- 选中的RowKeys
        selectedRowKeys: [],
        //-- 选中的Rows
        selectedRows: [],
    }

    componentDidMount() {
        //-- 获取表格数据
        this.findPageData();
    }

    /**
     * 查询页面数据
     */
    findPageData = function (params = {}) {
        const thisCtx = this;
        const {dispatch} = this.props;

        if (params.createTime) {
            params.startDate = params.createTime[0].format('YYYY-MM-DD');
            params.endDate = params.createTime[1].format('YYYY-MM-DD');
            delete params.createTime;
        }
        params.currentPage = pagingData._current;
        params.pageSize = pagingData._pageSize;
        console.log(params);
        thisCtx.setState({loading: true});
        dispatch({
            type: 'accountModel/companyList',
            payload: params,
            callback: function (data) {
                thisCtx.setState({loading: false});
                if (data && data.success) {
                    const paging = data.datas.pagination;
                    pagingData._current = paging.current + 1;
                    pagingData._pageSize = paging.pageSize;
                    pagingData._total = paging.total;
                    thisCtx.setState({
                        //-- 重置选中的行
                        selectedRowKeys: [],
                        selectedRows: [],
                        dataSource: data.datas.list,
                    });
                } else {
                    message.error('账户信息获取失败');
                }
            }
        });
    };

    /**
     * 显示或者隐藏 [更多搜索条件]
     */
    showOrHideMoreSearchForm = () => {
        const {showMoreSearchForm} = this.state;

        this.setState({
            showMoreSearchForm: !showMoreSearchForm,
        });
    };

    handleFilter = (params) => {
        this.params = params;
        witty.validNilParams(params)
        if (witty.isValidObj(params)) {
            pagingData._current = 1;
            witty.validNilParams(params);
            this.findPageData(params);
        }
    }

    handleAudit = (xstatus) => {
        const {selectedRowKeys, selectedRows} = this.state;
        if (selectedRowKeys.length == 1) {
            if (selectedRows[0].xstatus != 0) {
                message.warning('已审核过的数据不能重新审核！')
            } else {
                let thisCtx = this;
                const {dispatch} = this.props;
                let requestData = {
                    id: selectedRowKeys[0],
                    xstatus: xstatus
                };
                const content = {
                    1: '你确定审核通过选中的账户信息嘛？',
                    2: '你确定审核不通过选中的账户信息嘛？'
                }
                Modal['confirm']({
                    title: '审核',
                    content: content[xstatus],
                    okText: '确定',
                    cancelText: '取消',
                    onOk() {
                        thisCtx.setState({loading: true});
                        dispatch({
                            type: 'accountModel/companyAudit',
                            payload: requestData,
                            callback: function (data) {
                                thisCtx.setState({loading: false});
                                if (data && data.success) {
                                    message.success('提交成功');
                                    thisCtx.findPageData();
                                } else {
                                    message.error(data.msg);
                                }
                            },
                        });
                    },
                });
            }
        } else {
            message.info('请选择一行要操作的数据');
        }
    }

    formList = [
        {
            type: 'INPUT',
            label: '账户名',
            field: 'name',
            placeholder: '请输入用户ID',
        },
        {
            type: 'SELECT',
            label: '注册状态',
            field: 'xstatus',
            list: [{id: '0', name: '待审核'}, {id: '1', name: '审核成功'}, {id: '2', name: '审核失败'}]
        },
        {
            type: 'RANGEPICKER',
            label: '创建时间',
            field: 'createTime',
        },
    ]

    render() {

        const {loading, selectedRowKeys, dataSource} = this.state;

        const buttonsStyle = {
            style: {
                marginRight: '15px',
            },
        };

        /**
         * 表格选中事件
         */
        const rowSelection = {
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys: selectedRowKeys,
                    selectedRows: selectedRows,
                });
            },
        };

        return (
            <div>
                <Spin spinning={loading}>
                    <PageHeaderWrapper>
                        <Card style={{width: '100%', marginTop: '10px'}}>
                            <FilterForm formList={this.formList} filterSubmit={this.handleFilter}/>
                        </Card>

                        <Card style={{width: '100%', marginTop: '10px'}}>
                            <Tooltip title={selectedRowKeys.length == 1 ? '' : '请选中一行数据'}>
                                <Button
                                    icon="check-square"
                                    type="primary"
                                    {...buttonsStyle}
                                    onClick={() => this.handleAudit(1)}
                                >
                                    审核通过
                                </Button>
                            </Tooltip>
                            <Tooltip title={selectedRowKeys.length == 1 ? '' : '请选中一行数据'}>
                                <Button
                                    icon="close-square"
                                    type="primary"
                                    {...buttonsStyle}
                                    onClick={() => this.handleAudit(2)}
                                >
                                    审核不通过
                                </Button>
                            </Tooltip>
                        </Card>

                        <Card style={{width: '100%', marginTop: '10px', overflow: "auto"}}>
                            <Table
                                bordered
                                rowKey={data => `${data.id}`}
                                rowSelection={rowSelection}
                                columns={this.columns}
                                dataSource={dataSource}
                                pagination={{
                                    pageSize: pagingData._pageSize,
                                    current: pagingData._current,
                                    total: pagingData._total,
                                    onChange: (page) => {
                                        pagingData._current = page;
                                        this.findPageData();
                                    },
                                    showTotal: total => `共 ${total} 条数据`,
                                    style: {
                                        float: "left"
                                    }
                                }}
                            />
                        </Card>
                    </PageHeaderWrapper>
                </Spin>
            </div>
        );
    }

    /**
     * 表格列
     */
    columns = [
        {
            title: '用户ID',
            align: 'center',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '创建时间',
            align: 'center',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '账户名',
            align: 'center',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '统一社会信用代码',
            align: 'center',
            dataIndex: 'code',
            key: 'code',
        },
        {
            title: '营业执照',
            align: 'center',
            dataIndex: 'businessPath',
            key: 'businessPath',
            width: 150,
            height: 150,
            render: (text, record) => {
                if (text) {
                    return <img alt={'business'} style={{width: '100%'}} src={text} onClick={() => {
                        window.open(text, '_blank');
                    }}/>
                }
            }
        },
        {
            title: '注册状态',
            align: 'center',
            dataIndex: 'xstatus',
            key: 'xstatus',
            render(text, record) {
                const xstatusData = {
                    0: '待审核',
                    1: '审核成功',
                    2: '审核失败',
                }
                return xstatusData[text];
            }
        },
        {
            title: '联系人',
            align: 'center',
            dataIndex: 'contactor',
            key: 'contactor',
        },
        {
            title: '手机号码',
            align: 'center',
            dataIndex: 'tel',
            key: 'tel',
        },
        {
            title: '联系邮箱',
            align: 'center',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: '公司logo',
            align: 'center',
            dataIndex: 'logo',
            key: 'logo',
            width: 150,
            height: 150,
            render: (text, record) => {
                if (text) {
                    return <img alt={'logo'} style={{width: '100%'}} src={text} onClick={() => {
                        window.open(text, '_blank');
                    }}/>
                }
            }
        },
    ]
}

export default Form.create()(AdminAccount);
